<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/index.css" />
		<link rel="stylesheet" href="css/index%20(1).css">

		<!-- 引入组件 -->
		<script src="js/vue.js"></script>
		<script src="js/vant.js"></script>
		<script src="html5plus://ready"></script>
		<script type="text/javascript">
			document.addEventListener('plusready', function() {
				//console.log("所有plus api都应该在此事件发生后调用，否则会出现plus is undefined。"

			});
		</script>
	</head>
	<body>
		<div id="app">
			<section>

			</section>
			<footer class="bottom" >
				<van-tabbar v-model="active" v-model="isShow" @change="shouye" active-color="#FF4444">
					<van-tabbar-item icon="shop-o">首页</van-tabbar-item>
					<van-tabbar-item icon="apps-o">分类</van-tabbar-item>
					<van-tabbar-item icon="shopping-cart-o">购物车</van-tabbar-item>
					<van-tabbar-item icon="contact">个人中心</van-tabbar-item>
				</van-tabbar>
			</footer>
		</div>
		<script src="js/ajax.js" type="text/javascript" charset="utf-8"></script>
		<script>
			var vm = new Vue({
				el: "#app",
				data: {
					active: 0,
					views: [{
							name: "home",
							url: "views/home.html"
						},
						{
							name: "type",
							url: "Type/index.html"
						},
						{
							name: "shop",
							url: "views/shop.html"
						},
						{
							name: "self",
							url: "Self/index.html"
						}
					],
					isShow: true
				},
				mounted: function() {
					_this = this;

					window.addEventListener('resize', function() {
						_this.isShow = !_this.isShow; 
// 						var bottomEl = document.querySelector('.bottom');
// 						// 可见区域高度减去元素的高度  
// 						bottomEl.style.top = document.documentElement.clientHeight - 50 + 'px';
// 						var height = document.documentElement.clientHeight;
// 						console.log('可见区域高度:' + height);
						//console.log(bottomEl.style.display);
					});

					var self = plus.webview.currentWebview();
					for (var i = 0; i < this.views.length; i++) {
						var child = plus.webview.create(this.views[i].url, this.views[i].name, {
							top: "0px",
							bottom: "50px",
							scrollIndicator: "none",
							//softinputMode:"none",
							zindex: 1
						})
						self.append(child);
					};
					plus.webview.show(this.views[0].name);

				},
				methods: {
					shouye: function() {
						plus.webview.show(this.views[this.active].name);
					}
				}
			})
		</script>
	</body>
</html>
